﻿@page "/components/table"
<LayoutContent AnchorItems="@(new[]{"基础表格","斑马纹表格","边框表格","鼠标悬浮行","固定顶部", "加载状态",
"自定义表尾的表格","可分页的表格","可选择行的表格","可展开行的表格","空表格", "API"})">
<PageHeader Title="Table 表格">
    表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
</PageHeader>

<Example Title="基础表格">
    <Description>简单表格，使用边框线、斑马纹等清晰呈现各数据单元格边界线，辅助信息区隔。</Description>
    <RunContent>
            <TTable TItem="User" Data="User.GetData()">
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
                </TTableFieldColumn>
        </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData()"">
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
        </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
</Example>

    <Example Title="斑马纹表格">
    <Description>设置 <code>Striped</code> 让表格具备颜色间隔</Description>
    <RunContent>
        <TTable TItem="User" Data="User.GetData()" Striped>
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
            </TTableFieldColumn>
        </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData()"" Striped>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
</Example>

    <Example Title="边框表格">
    <Description>设置 <code>Bordered</code> 让表格每个列都显示边框</Description>
    <RunContent>
            <TTable TItem="User" Data="User.GetData()" Bordered>
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
            </TTableFieldColumn>
        </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData()"" Bordered>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
</Example>

    <Example Title="鼠标悬浮行">
    <Description>设置 <code>Hoverable</code> 鼠标悬停行会有颜色高亮</Description>
    <RunContent>
        <TTable TItem="User" Data="User.GetData()" Hoverable>
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
            </TTableFieldColumn>
        </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData()"" Hoverable>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
</Example>

    <Example Title="固定顶部">
    <Description>设置 <code>FixedHeader</code> 可以固定顶部列，但同时要设置 <code>FixedHeight</code> 定义内容部分的高度</Description>
    <RunContent>
        <TTable TItem="User" Data="User.GetData(20)" FixedHeader FixedHeight="200">
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
            </TTableFieldColumn>
        </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData(20)"" FixedHeader FixedHeight=""200"">
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
    </Example>
    <Example Title="加载状态">
    <Description>普通加载，会在表格上面显示半透明加载层，表格内容不隐藏。</Description>
    <RunContent>
        <TTable TItem="User" Data="User.GetData()" Loading>
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
                </TTableFieldColumn>
        </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData()"" Loading=""Loading"">
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
        </TTableFieldColumn>
</TTable>
```
```cs
@code{
    bool Loading = true;
}
```
")
    </CodeContent>
</Example>
    <Example Title="自定义表尾的表格">
    <Description>
        设置表格的 <code>FooterContent</code> 设置通栏表尾的内容；<br />
        设置列的 <code>FooterContent</code> 可单独设置列的尾部内容；<br />
        表格的 <code>FooterContent</code> 优先级高于列的 <code>FooterContent</code>
    </Description>
    <RunContent>
            <h3>自定义通栏底部</h3>
            <TTable TItem="User" Data="TablePage.User.GetData(5)">
                <ChildContent>
                    <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                    <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                    <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                    <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                        @if ( context is not null )
                        {
                            if ( context.Gender )
                            {
                                <TTag Theme="Theme.Primary">男</TTag>
                            }
                            else
                            {
                                <TTag Theme="Theme.Danger">女</TTag>
                            }
                        }
                    </TTableFieldColumn>
                </ChildContent>
                <FooterContent>
                    表格的底部
                </FooterContent>
            </TTable>
            <h3>自定义列的底部</h3>
            <TTable TItem="User" Data="TablePage.User.GetData(5)">
                <TTableFieldColumn Field="f=>f.Id" Header="Id">
                    <FooterContent>
                        Id
                    </FooterContent>
                </TTableFieldColumn>
                <TTableFieldColumn Field="f=>f.Name" Header="姓名">
                    <FooterContent>
                        姓名
                    </FooterContent>
                </TTableFieldColumn>
                <TTableFieldColumn Field="f=>f.Age" Header="年龄">
                    <FooterContent>
                        年龄
                    </FooterContent>
                </TTableFieldColumn>
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
            </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<h3>自定义通栏底部</h3>
<TTable TItem=""User"" Data=""TablePage.User.GetData(5)"">
    <ChildContent>
        <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
        <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
        <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
        <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
            @if ( context is not null )
            {
                if ( context.Gender )
                {
                    <TTag Theme=""Theme.Primary"">男</TTag>
                }
                else
                {
                    <TTag Theme=""Theme.Danger"">女</TTag>
                }
            }
        </TTableFieldColumn>
    </ChildContent>
    <FooterContent>
        表格的底部
    </FooterContent>
</TTable>

<h3>自定义列的底部</h3>
<TTable TItem=""User"" Data=""TablePage.User.GetData(5)"">
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"">
        <FooterContent>
            Id
        </FooterContent>
    </TTableFieldColumn>
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"">
        <FooterContent>
            姓名
        </FooterContent>
    </TTableFieldColumn>
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"">
        <FooterContent>
            年龄
        </FooterContent>
    </TTableFieldColumn>
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if ( context is not null )
        {
            if ( context.Gender )
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
</Example>
    <Example Title="可分页的表格">
    <Description>
        参数 <code>Data</code> 是静态数据。动态数据则使用 <code>DataQuery</code> 参数，它是一个委托。
    </Description>
    <RunContent>
            <h3>静态数据</h3>
            <TTable TItem="User" Data="User.GetData(30)" Pagination>
                <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
            </TTable>
            <h3>动态数据</h3>
            <TTable TItem="User" Data="DataSource<User>.Parse(TablePage.Mock)" Pagination>
                <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
            </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<h3>静态数据</h3>
<TTable TItem=""User"" Data=""User.GetData(30)"" Pagination>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if ( context is not null )
        {
            if ( context.Gender )
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>

<h3>动态数据</h3>
<TTable TItem=""User"" Data=""DataSource<User>.Parse(TablePage.Mock)"" Pagination>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if ( context is not null )
        {
            if ( context.Gender )
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
```cs
static async Task<(IEnumerable<User> data,int count)> Mock(int take,int skip)
{
    await Task.Delay(1000);

    //模拟远程取数据的代码
    var result = User.GetData(50); 
    var count = result.Count;
    var data = result.Take(take).Skip(skip);
    return (data,count);
}
```
")
    </CodeContent>
</Example>
    <Example Title="可选择行的表格">
    <Description>
        选择使用 <code>&lt;TTableRadioColumn></code> 组件呈现单选按钮的列；选择使用 <code>&lt;TTableCheckboxColumn></code> 组件呈现多选按钮的列。
    </Description>
    <RunContent>
            <TTable TItem="User" Data="User.GetData(7)" Hoverable OnRowSelected="RowSelected">
                <TTableRadioColumn Field="f=>f.Id" Header="选择"/>
                <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
            </TTable>
            <TTable TItem="User" Data="User.GetData(5)" Hoverable OnRowSelected="RowSelected">
                <TTableCheckboxColumn Field="f=>f.Id" Header="选择"/>
                <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
            </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""User.GetData(7)"" Hoverable OnRowSelected=""RowSelected"">
    <TTableRadioColumn Field=""f => f.Id"" Header=""选择""/>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if ( context is not null )
        {
            if ( context.Gender )
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>

<TTable TItem=""User"" Data=""User.GetData(5)"" Hoverable OnRowSelected=""RowSelected"">
    <TTableCheckboxColumn Field=""f => f.Id""/>
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if ( context is not null )
        {
            if ( context.Gender )
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
```cs
async Task RowSelected(TTableRowItemEventArgs<User> e) 
    => await JS.InvokeVoidAsync(""alert"", e.Item is null ? ""你什么都没选"" : $""你选择的是：{e.Item?.Name}"");
```
")
    </CodeContent>
</Example>
    <Example Title="可展开行的表格">
    <Description>
        使用 <code>&lt;TTableExpandColumn></code> 列可进行展开/收缩功能
    </Description>
    <RunContent>
            <TTable TItem="User" Data="User.GetData(5)">
                <TTableExpandColumn>
                    <dl>
                        <dt>姓名</dt>
                        <dd>@context?.Name</dd>
                        <dt>年龄</dt>
                        <dd>@context?.Age</dd>
                    </dl>
                </TTableExpandColumn>
                <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
            </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<TTable TItem=""User"" Data=""User.GetData(5)"">
    <TTableExpandColumn>
        <dl>
            <dt>姓名</dt>
            <dd>@context?.Name</dd>
            <dt>年龄</dt>
            <dd>@context?.Age</dd>
        </dl>
    </TTableExpandColumn>
    <TTableFieldColumn Field=""f=>f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f=>f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f=>f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f=>f.Gender""  Header=""性别"">
        @if ( context is not null )
        {
            if ( context.Gender )
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>
```
")
    </CodeContent>
</Example>

    <Example Title="空表格">
        <Description>使用默认空表格样式。可使用 <code>EmptyContent</code> 自定义空表格模板</Description>
    <RunContent>
            <TTable TItem="User" Data="new List<User>()">
            <TTableFieldColumn Field="f=>f.Id" Header="Id" />
            <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
            <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
            <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                @if (context is not null)
                {
                    if (context.Gender)
                    {
                        <TTag Theme="Theme.Primary">男</TTag>
                    }
                    else
                    {
                        <TTag Theme="Theme.Danger">女</TTag>
                    }
                }
                </TTableFieldColumn>
        </TTable>

            <TTable TItem="User" Data="new List<User>()">
                <ChildContent>
                <TTableFieldColumn Field="f=>f.Id" Header="Id" />
                <TTableFieldColumn Field="f=>f.Name" Header="姓名" />
                <TTableFieldColumn Field="f=>f.Age" Header="年龄" />
                <TTableFieldColumn Field="f=>f.Gender"  Header="性别">
                    @if ( context is not null )
                    {
                        if ( context.Gender )
                        {
                            <TTag Theme="Theme.Primary">男</TTag>
                        }
                        else
                        {
                            <TTag Theme="Theme.Danger">女</TTag>
                        }
                    }
                </TTableFieldColumn>
                </ChildContent>
                <EmptyContent>
                    自定义空模板
                </EmptyContent>
            </TTable>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTable TItem=""User"" Data=""new List<User>()"">
    <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
    <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
    <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
    <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
        @if (context is not null)
        {
            if (context.Gender)
            {
                <TTag Theme=""Theme.Primary"">男</TTag>
            }
            else
            {
                <TTag Theme=""Theme.Danger"">女</TTag>
            }
        }
    </TTableFieldColumn>
</TTable>

<TTable TItem=""User"" Data=""new List<User>()"">
    <ChildContent>
        <TTableFieldColumn Field=""f => f.Id"" Header=""Id"" />
        <TTableFieldColumn Field=""f => f.Name"" Header=""姓名"" />
        <TTableFieldColumn Field=""f => f.Age"" Header=""年龄"" />
        <TTableFieldColumn Field=""f => f.Gender""  Header=""性别"">
            @if (context is not null)
            {
                if (context.Gender)
                {
                    <TTag Theme=""Theme.Primary"">男</TTag>
                }
                else
                {
                    <TTag Theme=""Theme.Danger"">女</TTag>
                }
            }
        </TTableFieldColumn>
    </ChildContent>
    <EmptyContent>
        自定义空模板
    </EmptyContent>
</TTable>
```
")
    </CodeContent>
</Example>

<div id="API"></div>
    <ComponentAPI Component="typeof(TTable<>)" Title="TTable" />
    <ComponentAPI Component="typeof(TTableFieldColumn<,>)" Title="TTableFieldColumn"/>
    <ComponentAPI Component="typeof(TTableRadioColumn<,>)" Title="TTableRadioColumn" />
    <ComponentAPI Component="typeof(TTableCheckboxColumn<,>)" Title="TTableCheckboxColumn" />
    <ComponentAPI Component="typeof(TTableExpandColumn<>)" Title="TTableExpandColumn" />
</LayoutContent>

